<script setup lang="ts">
const props = defineProps({
  value: {
    type: Number,
    default: 0,
  },
  min: {
    type: Number,
    default: 0,
  },
  max: {
    type: Number,
    default: 100,
  },
  size: {
    type: String,
    default: '14px',
  },
})
const emits = defineEmits(['update:value'])
const { value, min, max } = toRefs(props)
const disabledAdd = computed(() => value.value >= max.value)
const disabledSub = computed(() => value.value <= min.value)
function handleAdd() {
  if (disabledAdd.value) return
  emits('update:value', value.value + 1)
}
function handleSub() {
  if (disabledSub.value) return
  emits('update:value', value.value - 1)
}
</script>

<template>
  <view class="flex items-center">
    <view
      class="i-carbon-subtract-filled"
      :class="disabledSub ? 'text-[#7F7F7F]' : 'text-primary'"
      :style="{ fontSize: size }"
      @click="handleSub"
    />
    <wd-text :text="value" class="mx-4" color="#333" :size="size" />
    <view
      class="i-carbon-add-filled"
      :style="{ fontSize: size }"
      :class="disabledAdd ? 'text-[#7F7F7F]' : 'text-primary'"
      @click="handleAdd"
    />
  </view>
</template>

<style scoped lang="scss"></style>
